import a from './Order_details.module.css'
import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import TabBar1 from '../../../components/TabBar/TabBar'
import NavBars from '../../../components/NavBar/NavBar'
import { ProductCard } from 'react-vant';
import { useDispatch, useSelector } from 'react-redux'
import { list_user } from '../../../redux/Chat_reducer'
import { Steps, Button, IndexBar, Tabs } from 'react-vant';


export default function Order_details() {
  const navigate = useNavigate()
  const dispatch=useDispatch()
  const shop = useSelector(store => store.shop.shoplist.sid)
  const user = useSelector(store => store.user.userObj)
  const item = useLocation().state
  const user_change = (a) => {
    switch (a) {
      case 1:
        return "打包"
        break;
      case 2:
        return "堂食"
        break;
      case 3:
        return "外卖"
        break;
    }
  }
  const order_change = (a) => {
    switch (a) {
      case 0:
        return "已下单"
        break;
      case 1:
        return "正在制作"
        break;
      case 2:
        return "正在派送"
      case 3:
        return "已完成"
        break;
    }
  }
  const order_time = (a) => {
    let b = new Date(a)
    let year = b.getFullYear()
    let month = b.getMonth() + 1
    let day = b.getDate()
    let hour = b.getHours()
    let minutes = b.getMinutes()
    let second = b.getSeconds()
    return `下单时间：${year}-${month}-${day} ${hour}:${minutes}:${second}`
  }
  const list_show = () => {
    return <div className={a.model}>

      <Steps active={item.state}>
        <Steps.Item>已下单</Steps.Item>
        <Steps.Item>正在制作</Steps.Item>
        <Steps.Item>正在派送</Steps.Item>
        <Steps.Item>已完成</Steps.Item>
      </Steps>
      <div className={a.fontstate}>
        <span className={a.user_state}>{user_change(item.item.id)}</span>
        <span className={a.order_state}>{order_change(item.state)}</span>
      </div>
      <h3>{item.name}</h3>
      {item.clist.map((items) => {
        return <ProductCard
          className={a.product}
          num={items.num}
          price={items.price}
          title={items.name}
          thumb={'../../../../public/imgs/'+items.path+'.jpg'}
        />
      })}
      <div className={a.order_message}>
        <span>{order_time(item.time)}</span>
        <p>共：{item.num}件</p>
        <span>应付：{item.price}元</span>
        <span style={{ paddingLeft: '10px' }}>实付：{item.price}元</span>
        <hr></hr>
        <p>订单编号：{item._id}</p>
        <p>商家电话：{shop.telephone}</p>
        <hr></hr>
        <p>用户名：{user.name}</p>
        <p>用户电话：{user.phone}</p>
        <button className={a.button} style={{ display: user == 'rider' ? 'none' : 'bloack' }} onClick={() => {
          dispatch(list_user("用户骑手"))
          navigate('/chat')
        }}>联系骑手</button>
        <button className={a.button} style={{ display: user == 'user' ? 'none' : 'bloack' }} onClick={() => {
          dispatch(list_user("用户商家"))
          navigate('/chat')
        }}>联系商家</button>
        <button className={a.button} onClick={() => { navigate(`/shop/${shop}`) }}>再来一单</button>
      </div>
    </div>
  }
  return (
    <div>
      <NavBars name={'订单详情'}></NavBars>
      123
      {list_show()}
      <TabBar1></TabBar1>
    </div>
  )
}
